<!--
 * @Description: 左侧第一个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-22 16:15:25
-->
<template>
  <!-- 图表容器 -->
  <div ref="container" style="height:95%">
  </div>
</template>
<script>
//引入图表构造函数
import { Line } from '@antv/g2plot';
export default {
  data(){
    return{
      
    }
  },
  methods: {
    //封装图表方法
    loadCharts(){
      const data = [
        {
          Date: "2016-04",
          scales: 680,
        },
        {
          Date: "2016-05",
          scales: 802,
        },
        {
          Date: "2016-06",
          scales: 697,
        },
        {
          Date: "2016-07",
          scales: 583,
        },
        {
          Date: "2016-08",
          scales: 456,
        },
        {
          Date: "2016-09",
          scales: 524,
        },
        {
          Date: "2016-10",
          scales: 398,
        },
        {
          Date: "2016-11",
          scales: 278,
        },
        {
          Date: "2016-12",
          scales: 195,
        },
        {
          Date: "2017-01",
          scales: 145,
        },
        {
          Date: "2017-02",
          scales: 207,
        },
        {
          Date: "2017-01",
          scales: 145,
        },
        {
          Date: "2017-02",
          scales: 207,
        },
        {
          Date: "2016-12",
          scales: 195,
        },
        {
          Date: "2017-01",
          scales: 145,
        },
        {
          Date: "2017-02",
          scales: 207,
        },
        {
          Date: "2017-01",
          scales: 145,
        },
        {
          Date: "2017-02",
          scales: 207,
        },
      ];

      const line = new Line(this.$refs['container'], {
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        // type: 'timeCat',
        tickCount: 5,
      },
      yAxis: {
        // type: 'timeCat',
        tickCount: 8,
      },
      //更改提示框样式
      tooltip:{
        fields:['Date','scales'],
        domStyles:{
          "g2-tooltip":{
            background:'purple',
            color:'#fff'
          }
        }
      }
    });

    line.render();
    }
  },
  // 生命周期 钩子函数 dom挂载到页面
  mounted(){
    this.loadCharts()
  }
}
</script>
<style lang="scss">
  
</style>